<template>
  <!-- wrapper元素是创建BetterScroll对象的第一个参数，内部只能有一个子元素，该子元素就是滚动的区域 -->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import BetterScroll from 'better-scroll'
export default {
  name:'Scroll',
  props:{
    probeType: {
      type: Number,
      default: 0
    },
    pullUpLoad:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      scroll: null
    }
  },
  mounted(){
    this.$nextTick(()=>{
      // 1.创建BetterScroll实例
      this.scroll = new BetterScroll(this.$refs.wrapper,{
        click: true,//滚动区域可以触发单击事件
        probeType: this.probeType,// 0/1：不监听滚动事件，2：手指滚动触发滚动事件，离开立马失效，3：只要屏幕滚动就触发滚动事件
        pullUpLoad: this.pullUpLoad, //上拉至底触发事件
        observeDOM: true, // 监听dom加载完成，自动刷新滚动区域
        // observeImage: true, // 监听图片加载完成，自动刷新滚动区域
      });
      // 2.监听滚动的位置,x/y
      if(this.probeType === 2 || this.probeType === 3){
        this.scroll.on('scroll', (position) => {
          this.$emit('scroll', position);
        })
      }
      // 3.监听上拉事件，至底触发
      if(this.pullUpLoad){
        this.scroll.on('pullingUp', () => {
          this.$emit('pullingUp');
        })
      }
    })
  },
  methods:{
    // 自定义设置滚动具体位置
    scrollTo(x, y , time=0){
      this.scroll && this.scroll.scrollTo(x, y, time);
    },
    // 本次上拉事件完成，需调用此方法，才会触发下一次上拉至底事件
    finishPullUp(){
      this.scroll && this.scroll.finishPullUp();
    },
    // 更新获取可滚动的区域高度
    refresh(){
      this.scroll && this.scroll.refresh();
    },
    // 保存滚动的距离
    getScrollY(){
      return this.scroll ? this.scroll.y : 0;
    }
  }
}
</script>
<style lang="less" scoped>

</style>